<style scoped>
.layui-row {
    overflow: hidden;
}

.select-item {
    width: 34.333333%;
    float: right;
}

.layui-row:after,
.layui-row:before {
    clear: none;
}
</style>

<template>
<div class="department">
    <div>
        <a href="javascript:;" class="layui-btn" @click="add"><i class="layui-icon">&#xe654;</i>添加销售计划</a>
    </div>
    <div class="layui-col-lg4 select-item" style="text-align: right;width: auto">
        <div class="layui-input-inline" style="width: 200px">
            <input type="text" v-model="searchName" placeholder="部门名称" class="layui-input key">
        </div>
        <div class="layui-input-inline" style="width: 200px">
            <input type="text" v-model="monthName" name="dailydata" autocomplete="off"  id="dailydata" placeholder="请选择计划时间" class="layui-input key">
        </div>
        <button type="button" class="layui-btn sou" @click="search">搜索</button>
    </div>
    <table class="layui-table layui-form">

        <thead>
            <tr>
                <th>月度</th>
                <th>部门</th>
                <th>重量</th>
                <th>创建人</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr class="id9" v-for="(val, index) in saleplan" :key="index">
                <td>{{val.monthly}}</td>
                <td>{{val.depart}}</td>
                <td>{{val.weight}} </td>
                <td>{{val.operator}}</td>
                <td>{{val.createtime}}</td>
                <td><a href="javascript:;" @click="edit(val.guid)">修改</a> | <a href="javascript:;" @click="del(val.guid)">删除</a></td>
            </tr>
        </tbody>
    </table>

    <Pagination :cur="currentPage" :all="totalPage" :callback="turnPage"></Pagination>
</div>
</template>

<script>
let qs = require('qs');
import Pagination from '../common/Pagination.vue'
export default {
    name: 'SalesPlan',
    components: {
        Pagination
    },
    data() {
        return {
            saleplan: [],
            currentPage: 1,
            totalPage: 0,
            searchName: '',
            monthName: ''
        }
    },
    mounted() {
        let that = this;
        this.getList()
        layui.use(['form'], function () {
            var form = layui.form,
                layer = layui.layer;
        });
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#dailydata',
                type: 'month'
            });
        });
    },
    methods: {
        search: function () {
            this.getPageData('search');

        },
        turnPage: function (data) {
            this.currentPage = data;
            this.getPageData();
        },
        getPageData: function (type = '') {
            let that = this;
            let loader = layui.layer.load();

            let postData = {};
            if (type != 'search') {
                postData.page = that.currentPage;
            } else {
                postData.page = 1;
            }
            that.monthName = $("#dailydata").val()
            postData.depart = that.searchName;
            postData.monthly = that.monthName

            $.ajax({
                url: '/sales/Saleplan!listByPage.action',
                type: "post",
                data: postData,
                dataType: "json",
                success: function (res) {
                    console.log("listByPage", res)
                    if (res.info != undefined && res.info.rows != undefined) {
                        //分页数据赋值
                        // that.currentPage = res.info.indexPage;
                        that.totalPage = res.info.pageCount;
                        that.saleplan = res.info.rows;
                    } else {
                        that.alert("系统错误");
                    }
                },
                complete: function () {
                    layer.close(loader);
                }
            });
        },
        add: function () {
            this.$parent.switchPage('AddSalePlan');
        },
        edit: function (id) {
            this.$parent.gid = id;
            this.$parent.switchPage('EditSalePlan');
        },
        del: function (id) {
            let that = this;
            layer.confirm('确定要删除该数据？', function () {
                let loader = layer.load();

                $.ajax({
                    url: '/sales/Saleplan!del.action',
                    type: "post",
                    data: {
                        guid: id
                    },
                    dataType: "json",
                    success: function (res) {
                        if (res.info == "ok") {
                            that.toast("删除成功");
                            that.getPageData();
                        } else {
                            that.toast("系统错误");
                        }
                    },
                    complete: function () {
                        layer.close(loader);
                    }
                });
            })
        },
        getList() {
            let loader = layui.layer.load();
            Date.prototype.Format = function (fmt) {
                var o = {
                    "M+": this.getMonth() + 1, //月份 
                    "d+": this.getDate(), //日 
                    "H+": this.getHours(), //小时 
                    "m+": this.getMinutes(), //分 
                    "s+": this.getSeconds(), //秒 
                    "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                    "S": this.getMilliseconds() //毫秒 
                };
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            }
            var time = new Date().Format("yyyy-MM");
            this.$post("/sales/Saleplan!listByPage.action", qs.stringify({
                    monthly: time
                }))
                .then(res => {
                    this.currentPage = res.data.info.indexPage;
                    this.totalPage = res.data.info.pageCount;
                    this.saleplan = res.data.info.rows;
                    layer.close(loader);
                })
                .catch(error => {
                    that.alert("系统错误");
                    layer.close(loader);
                })
        }
    }
}
</script>
